<template>
  <hips-view>
    <hips-nav-bar
      slot="header"
      title="Tag 标签"
      :back-button="{
        showLeftArrow: true,
      }"
      @nav-bar-back-click="$router.back()"
    />
    <demo-block title="基础用法">
      <hips-tag>标签一</hips-tag>
      <hips-tag type="success">
        标签二
      </hips-tag>
      <hips-tag type="error">
        标签三
      </hips-tag>
      <hips-tag type="warn">
        标签四
      </hips-tag>
    </demo-block>

    <demo-block title="不同尺寸标签">
      <hips-tag size="large">
        大型标签
      </hips-tag>
      <hips-tag>默认标签</hips-tag>
      <hips-tag size="small">
        小型标签
      </hips-tag>
    </demo-block>

    <demo-block title="动态生成和删除标签">
      <transition-group name="hips-slide-in-scale-out">
        <hips-tag
          v-for="tag in dynamicTags"
          :key="tag"
          closable
          @close="handleClose(tag)"
        >
          {{ tag }}
        </hips-tag>

        <hips-button
          key="add"
          style="margin:10px;"
          type="primary"
          @click="handleAdd"
        >
          + 标签
        </hips-button>
      </transition-group>
    </demo-block>
  </hips-view>
</template>

<script>
import BasicView from '@/mixin/basic-view';
import { Tag, Button } from '@hips/vue-ui';
export default {
  components: {
    [Tag.name]: Tag,
    [Button.name]: Button,
  },
  mixins: [ BasicView ],
  data() {
    return {
      dynamicTags: [
'tag 1', 'tag 2', 'tag 3',
],
    };
  },
  methods: {
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
    handleAdd() {
      this.dynamicTags.push('tag ' + (this.dynamicTags.length + 1));
    },
  },
};
</script>

<style lang="stylus" scoped>
>>> .demo-block {
    .wrapper {
        padding 10px
    }
}

.hips-slide-in-scale-out {
  &-enter {
    transform translateX(-100%)
    opacity 0
  }

  &-enter-active, &-move {
    transition all .4s
  }

  &-leave-active {
    animation: size-scale .4s both cubic-bezier(0.36, 0.66, 0.04, 1)
    position: absolute
  }
}
</style>
